<template>
  <div class="app-container box-main">
    <!-- 搜索头 -->
    <!-- <transition name="el-zoom-in-top">
      <el-form v-show="searchShow" :inline="true" label-width="80px">
        <el-form-item label="场景名称">
          <el-input v-model="listQuery.title" size="small" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="handleSearchClick">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="handleSearchCleanClick">清空</el-button>
        </el-form-item>
      </el-form>
    </transition> -->

    <!-- 工具栏 -->
    <div class="tools-container">
      <div class="buttons">
        <!-- <el-row> -->
        <div v-for="(item,index) in title" :key="index" :class="[Number(nowIndex)===Number(index)?'active':'','change']" @click="change(index,item.components)">{{ item.name }}</div>
        <!-- <div class="change">位移传感器</div>
        <div class="change">激光传感器</div>
        <div class="change">超声波气象站</div>
        <div class="change">管式土壤监测</div>
        <div class="change">室内空气监测</div> -->
        <!-- </el-row> -->
      </div>
      <div><el-button type="primary" @click="handleDownClick">导出报表</el-button></div>
      <!-- <div class="tags"> -->
      <!-- <el-button size="mini" icon="el-icon-search" circle @click="handleSearchShowChange" />
        <el-button size="mini" icon="el-icon-refresh" circle @click="handleRefreshClick" />
        <el-button size="mini" icon="el-icon-menu" circle @click="handleHeaderClick" /> -->
      <!-- </div> -->
    </div>
    <div class="contant">
      <component :is="nowCom" />
    </div>
    <!-- 表头 -->
    <el-dialog title="导出报表" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" :rules="rule">
        <el-form-item label="时间选择" prop="time">
          <el-date-picker
            v-model="form.time"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            value-format="timestamp"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handelClick">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Indoor from './components/Indoor'
// import Gnss from "./components/Gnss";
import Rain from './components/Rain'
import Outdoor from './components/Outdoor'
import Soil from './components/Soil.vue'
import Laser from './components/Laser.vue'
import Cord from './components/Cord.vue'

export default {
  components: {
    Indoor,
    Outdoor,
    Rain,
    Soil,
    Laser,
    Cord
  },
  filters: {
    onlineFilter: function(value) {
      const map = ['在线', '离线']
      return map[value]
    }
  },
  data() {
    return {
      title: [
        { name: '室内传感器', components: Indoor },
        { name: '室外传感器', components: Outdoor },
        { name: '雨量传感器', components: Rain },
        { name: '土壤传感器', components: Soil },
        { name: '激光传感器', components: Laser },
        { name: '拉绳传感器', components: Cord }
        // { name: '激光传感器', components: Laser },
        // { name: '超声波气象站', components: Ultrasonic },
        // { name: '管式土壤监测', components: Soil },
        // { name: '室内空气监测', components: Air }
      ],
      nowIndex: 0,
      nowCom: 'Indoor',
      form: {
        time: ''
      },
      dialogFormVisible: false,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      rule: {
        time: [
          { required: true, message: '请选择时间', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    change(index, com) {
      this.nowIndex = index
      this.nowCom = com
    },
    handleDownClick() {
      const start = Date.now() - 7 * 24 * 60 * 60 * 1000
      const end = Date.now()
      this.form.time = [start, end]
      this.dialogFormVisible = true
    },
    handelClick() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.handleDown()
          this.dialogFormVisible = false
        }
      })
    },
    handleDown() {
      let type = null
      switch (this.nowIndex) {
        case 0 : type = 2; break
        case 1 : type = 3; break
        case 2 : type = 5; break
        case 3 : type = 6; break
        case 4 : type = 4; break
        case 5 : type = 1; break
      }
      window.open(
        `http://rootchen.top:8888/iot/data/data_export?startTime=${this.form.time[0]}&endTime=${this.form.time[1]}&type=${type}`,
        '_blank'
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.tools-container{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top:0.15rem
}
.buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
}
.change {
  width: 151px;
  height: 51px;
  background-color: rgb(243, 247, 250);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ddd;
  margin-right: 5px;
  cursor: pointer;

}
.active {
    background: #ffffff;
  }
</style>
